<template>
  <div>
      <el-tabs v-model="activeName" @tab-click="handleTabClick" style="min-height: 80vh;overflow:auto;padding-top: 10px;">
        <el-tab-pane label="基本信息" name="base">
          <BaseInfo @goToPayAuth="goToPayAuth" />
        </el-tab-pane>
        <el-tab-pane label="支付认证" name="pay" @goToBaseInfo="goToBaseInfo">
          <PayAuth ref="payAuthComponent" />
        </el-tab-pane>
        <el-tab-pane label="开票信息" name="invoce" @goToBaseInfo="goToBaseInfo">
          <InvoceAuth ref="invoceAuthComponent" />
        </el-tab-pane>
        <el-tab-pane label="安全设置" name="security">
          <SecuritySetting />
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import BaseInfo from './components/BaseInfo'
import PayAuth from './components/PayAuth'
import SecuritySetting from './components/SecuritySetting'
import InvoceAuth from './components/InvoceAuth'
export default {
  data() {
    return {
      activeName: 'base'
    }
  },
  components: {
    BaseInfo,
    PayAuth,
    InvoceAuth,
    SecuritySetting
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created() {    
    this.$store.dispatch('user/getUserInfo')
  },
  methods: {
    goToPayAuth(val) {
      if(val === 'pay') {
        this.activeName = 'pay'
      } else {
         this.activeName = 'invoce'
      }
    },
    goToBaseInfo() {
      this.activeName = 'base'
    },
     handleTabClick(tab) {
      if(this.userInfo?.isPayAuth == 1){
        if (tab.name === 'pay') {
          this.$refs.payAuthComponent.getCompanyPayInfoToForm();
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/element-variables";

:deep(.el-tabs__nav-scroll) {
  padding-left: 40px;
}

:deep(.el-tabs--border-card .el-tabs__nav-scroll) {
  padding-left: 0;
}

:deep(.el-tabs__item.is-active) {
  font-weight: bold;
}

:deep(.el-tabs__active-bar) {
  background-color: $--color-primary;
}

:deep(.el-tabs__content) {
    height: calc(100% - 65px);
    overflow: auto;

}

:deep(.el-tab-pane) {
  height: 100%;
}
</style>
